<template>
    <div class="container bottom">
        <ul class="ul">
        <li class="li"  v-for="item in list" :key="item.id">
            <div class="imgBox">
                <img :src="item.picture" alt="" class="img">
            </div>
            <p class="desc ellipsis">{{ item.desc }}</p>
            <p class="desc1 ellipsis">{{ item.name }}</p>
            <p class="price">{{item.price  }}</p>
        </li>
       </ul>
    </div>
</template>

<script>
    export default {
        props:{
            list:{
            type:Array,
            default:()=>[]
        }
    }
    }
</script>

<style lang="scss" scoped>
.bottom{
    background-color: #fff;
    box-sizing: border-box;
    padding: 23px;
    .ul{
        display: flex;
        // justify-content: space-around;
        flex-wrap: wrap;
        li{
            width: 200px;
            height: 280px;
            margin: 0 15px;
            margin-bottom: 20px;
            
            .imgBox{
                width: 160px;
                height: 160px;
                margin: 10px auto 0;
                .img{
                    width: 160px;
                    height: 160px;
                }
            }
             p{
                width: 160px;
                margin: 0 auto;
                text-align: center;
             }
            .desc{
                font-size: 16px;
                margin-top:10px ;
            }
            .desc1{
                color: #999;
                font-size:14px ;
                margin-top:10px ;
                
            }
            .price{
                color: #f00;
                font-size: 16px;
                margin-top:10px ;
                font-weight: 600;
            }
        }
        li:hover{
            transform: translateY(-10px);
            transition: 0.5s;
            box-shadow: 0 0 4px 4px  #ccc;
        }
    }
}
</style>